<!doctype html>
<html class="fixed">
<head>
    <!-- Basic -->
    <meta charset="UTF-8">
    <title>Form Wizard | Okler Themes | Porto-Admin</title>
    <meta name="keywords" content="HTML5 Admin Template"/>
    <meta name="description" content="Porto Admin - Responsive HTML5 Template">
    <meta name="author" content="okler.net">

    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <!-- Web Fonts  -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light"
          rel="stylesheet" type="text/css">

    <!-- Vendor CSS -->
    <link rel="stylesheet" href="../static/octopus/assets/vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../static/octopus/assets/vendor/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="../static/octopus/assets/vendor/magnific-popup/magnific-popup.css"/>
    <link rel="stylesheet" href="../static/octopus/assets/vendor/bootstrap-datepicker/css/datepicker3.css"/>

    <!-- Specific Page Vendor CSS -->
    <link rel="stylesheet" href="../static/octopus/assets/vendor/pnotify/pnotify.custom.css"/>

    <!-- Theme CSS -->
    <link rel="stylesheet" href="../static/octopus/assets/stylesheets/theme.css"/>

    <!-- Skin CSS -->
    <link rel="stylesheet" href="../static/octopus/assets/stylesheets/skins/default.css"/>

    <!-- Theme Custom CSS -->
    <link rel="stylesheet" href="../static/octopus/assets/stylesheets/theme-custom.css">

    <!-- Head Libs -->
    <script src="../static/octopus/assets/vendor/modernizr/modernizr.js"></script>

</head>
<body>
<section class="body">
    <!-- start: page -->
    <section class="panel form-wizard" id="w3">
        {#                        <header class="panel-heading">#}
        {#                            <div class="panel-actions">#}
        {#                                <a href="#" class="fa fa-caret-down"></a>#}
        {#                                <a href="#" class="fa fa-times"></a>#}
        {#                            </div>#}
        {##}
        {#                            <h2 class="panel-title">Form Wizard</h2>#}
        {#                        </header>#}
        <div class="panel-body">
            <div class="wizard-progress">
                <div class="steps-progress">
                    <div class="progress-indicator"></div>
                </div>
                <ul>
                    <li class="active">
                        <a href="#w3-account" data-toggle="tab"><span>1</span>Account Info</a>
                    </li>
                    <li>
                        <a href="#w3-profile" data-toggle="tab"><span>2</span>Profile Info</a>
                    </li>
                    <li>
                        <a href="#w3-billing" data-toggle="tab"><span>3</span>Billing Info</a>
                    </li>
                    <li>
                        <a href="#w3-confirm" data-toggle="tab"><span>4</span>Confirmation</a>
                    </li>
                </ul>
            </div>
            <form class="form-horizontal" novalidate="novalidate">
                <div class="tab-content">
                    <div id="w3-account" class="tab-pane active">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="w3-username">Username</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control input-sm" name="username"
                                       id="w3-username" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="w3-password">Password</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control input-sm" name="password"
                                       id="w3-password" minlength="6" required>
                            </div>
                        </div>
                        {#                                        <iframe name="" width="100%" height=740px frameborder="0" src="../function/workspacemain?function_name={{ function_name }}"></iframe>#}
                    </div>
                    <div id="w3-profile" class="tab-pane">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="w3-first-name">First Name</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control input-sm" name="first-name"
                                       id="w3-first-name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="w3-last-name">Last Name</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control input-sm" name="last-name"
                                       id="w3-last-name">
                            </div>
                        </div>
                    </div>
                    <div id="w3-billing" class="tab-pane">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="w3-cc">Card Number</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control input-sm" name="cc-number"
                                       id="w3-cc" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="inputSuccess">Expiration</label>
                            <div class="col-sm-4">
                                <select class="form-control input-sm" name="exp-month" required>
                                    <option>January</option>
                                    <option>February</option>
                                    <option>March</option>
                                    <option>April</option>
                                    <option>May</option>
                                    <option>June</option>
                                    <option>July</option>
                                    <option>August</option>
                                    <option>September</option>
                                    <option>October</option>
                                    <option>November</option>
                                    <option>December</option>
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <select class="form-control input-sm" name="exp-year" required>
                                    <option>2014</option>
                                    <option>2015</option>
                                    <option>2016</option>
                                    <option>2017</option>
                                    <option>2018</option>
                                    <option>2019</option>
                                    <option>2020</option>
                                    <option>2021</option>
                                    <option>2022</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="w3-confirm" class="tab-pane">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="w3-email">Email</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control input-sm" name="email"
                                       id="w3-email" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-9">
                                <div class="checkbox-custom">
                                    <input type="checkbox" name="terms" id="w3-terms" required>
                                    <label for="w3-terms">I agree to the terms of service</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <ul class="pager">
                <li class="previous disabled">
                    <a><i class="fa fa-angle-left"></i> Previous</a>
                </li>
                <li class="finish hidden pull-right">
                    <a>Finish</a>
                </li>
                <li class="next">
                    <a>Next <i class="fa fa-angle-right"></i></a>
                </li>
            </ul>
        </div>
    </section>
</section>

<!-- Vendor -->
<script src="../static/octopus/assets/vendor/jquery/jquery.js"></script>
<script src="../static/octopus/assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
<script src="../static/octopus/assets/vendor/bootstrap/js/bootstrap.js"></script>
<script src="../static/octopus/assets/vendor/nanoscroller/nanoscroller.js"></script>
<script src="../static/octopus/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="../static/octopus/assets/vendor/magnific-popup/magnific-popup.js"></script>
<script src="../static/octopus/assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>

<!-- Specific Page Vendor -->
<script src="../static/octopus/assets/vendor/jquery-validation/jquery.validate.js"></script>
<script src="../static/octopus/assets/vendor/bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script src="../static/octopus/assets/vendor/pnotify/pnotify.custom.js"></script>

<!-- Theme Base, Components and Settings -->
<script src="../static/octopus/assets/javascripts/theme.js"></script>

<!-- Theme Custom -->
<script src="../static/octopus/assets/javascripts/theme.custom.js"></script>

<!-- Theme Initialization Files -->
<script src="../static/octopus/assets/javascripts/theme.init.js"></script>

<!-- Examples -->
<script src="../static/octopus/assets/javascripts/forms/examples.wizard.js"></script>
</body>
</html>